import React, { PureComponent } from 'react'

import { Table } from 'antd';
import Ellipsis from '@/components/Ellipsis';
import { connect } from 'dva';
import { Dispatch } from 'typings/redux';

interface P {
  dispatch?: Dispatch;
  data?: Array<any>;
  loading?: boolean;
}

@connect(({ analyse_alarm, loading }) => ({
  data: analyse_alarm.incidence || [],
  loading: loading.effects['analyse_alarm/queryIncidence'],
}))
class Incidence extends PureComponent<P> {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'analyse_alarm/queryIncidence' })
  }

  render() {

    const column = [{
      title: '报警点位',
      dataIndex: 'locationName',
      width: 280,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 280,
          }
        }
      },
      render: (text) => (
        <Ellipsis tooltip={true} lines={1}>
          { text && text.length > 16 ? `${text.slice(0, 16)}...` : text}
        </Ellipsis>
      )
    }, {
      title: '报警类型',
      dataIndex: 'typeName',
      width: 160,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 160,
          }
        }
      },
    }, {
      title: '报警次数',
      dataIndex: 'count',
      width: 150,
      onCell: () => {
        return {
          style: {
            whiteSpace: 'nowrap',
            maxWidth: 150,
          }
        }
      },
    }, {
      title: '最近报警时间',
      dataIndex: 'pushTime'
    }];

    const { data } = this.props;
    const ans = Array.isArray(data) ? data.map((v, i) => ({
      key: i,
      ...v
    })) : [];

    return (

      <Table
        columns={column}
        dataSource={ans}
        pagination={false}
        style={{ height: '100%' }}
        scroll={{ y: 'calc(49vh - 150px)' }}
        loading={this.props.loading}
        size="small"
      />
    )
  }
}

export default Incidence;